<template>
  <div class="movieInfo">
    <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
      <div class="ball" v-show="ballFlag" ref="ball"></div>
    </transition>
    <!-- <h3>影片详情</h3> -->
    <div class="mui-card">
      <div class="mui-card-content">
        <img :src="subjects.img" alt="">
      </div>
    </div>
    <div class="mui-card">
      <div class="mui-card-content my-content">
        <div class="want">
          <p>
            售价:
            <del>￥55</del>
            <span>{{ price }}</span>
          </p>
        </div>
        <div class="buy">
          <numbox class="numbox" @getSelectCount="getSelectCount" :maxStock="maxStock"></numbox>
          <mt-button type="primary" @click="addCar">购票</mt-button>
        </div>
      </div>
    </div>
    <div class="mui-card">
      <div class="mui-card-header my-header">
        <p style="color: #333;">{{ subjects.titleCn }}</p>
        <p style="color: #332;">{{ subjects.titleEn }}</p>
      </div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p>主演：{{subjects.actorName1}}&nbsp;&nbsp;{{subjects.actorName1}}</p>
          <p>导演：{{ subjects.directorName}}</p>
          <p>Posted on {{ subjects.rYear }}-{{ subjects.rMonth }}-{{ subjects.rDay }}</p>
          <p>{{ subjects.type }}</p>
        </div>
        <div class="mui-card-footer">
          <p>{{ subjects.commonSpecial}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import numbox from '../subcomponent/goodsInfo_numBox.vue'
export default {
  data() {
    return {
      ballFlag: false,
      id: this.$route.params.id,
      subjects: '',
      SelectCount: 1,
      maxStock: 30,
      price: '￥29.9'
    }
  },
  created() {
    this.getMovie()
  },
  methods: {
    getMovie() {
      this.$http.get('../../data_file/movies.json')
        .then(data => {
          data = data.body
          this.subjects = data.movies[this.id]
          console.log(this.subjects)
        })
    },
    addCar() {
      this.ballFlag = !this.ballFlag
      // 保存一个要存入到 store 中的 对象
      var goodsInfo = { id: parseInt(this.id), count: this.SelectCount, price: this.price, selected: true }
      this.$store.commit("addToCar", goodsInfo)
    },
    beforeEnter(el) {
      el.style.transform = "translate(0, 0)";
    },
    enter(el, done) {
      el.offsetWidth
      const ballPosition = this.$refs.ball.getBoundingClientRect()
      const badgePosition = document.getElementById('badge').getBoundingClientRect()
      const xDist = badgePosition.left - ballPosition.left
      const yDist = badgePosition.top - ballPosition.top

      el.style.transform = `translate(${xDist}px, ${yDist}px)`
      el.style.transition = "all 1s cubic-bezier(.4,-0.3,1,.68)"
      done()
    },
    afterEnter(el) {
      this.ballFlag = !this.ballFlag
    },
    getSelectCount(count) {
      this.SelectCount = count
      console.log(this.SelectCount)
    }
  },
  components: {
    numbox
  }

}
</script>
<style lang="scss" scoped>
.movieInfo {
  background-color: #eee;
  overflow: hidden;
  position: relative;
  img {
    width: 100%;
    vertical-align: middle;
  }
}
.ball {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: absolute;
  background-color: red;
  top: 519px;
  right: 50px;
  z-index: 99;
}
.my-card-footer {
  color: #6d6d72;
  border-radius: 0 0 2px 2px;
  min-height: 44px;
  padding: 10px 15px;
}
.my-content {
  display: flex;
  justify-content: space-around;
  padding: 10px 0;
}
.my-header {
  display: block;
}
.buy > .numbox {
  vertical-align: middle;
  margin-top: 5px;
}
.want > p {
  display: inline-block;
  font-size: 18px;
  font-weight: 400;
  line-height: 42px;
  color: #000;
  del {
    color: #ccc;
  }
  span {
    color: red;
  }
}
</style>
